<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeMount } from 'vue'
onMounted(() => init())

const loading1 = ref(false)
const loading2 = ref(false)
const finished = ref(false)

let page = 1
let total = 0
const list = ref<any[]>([])

/**
 * 初始化
 */
const init = async () => {
  loading1.value = true
  await getList(false)
  loading1.value = false
}

/**
 * 获取列表
 */
const getList = async (isLoading = true) => {
  isLoading && ~(loading2.value = true)
  const data = await getPlaceList({ area: '', name: '', page })
  list.value = [...list.value, ...data.list]
  page = +data.page + 1
  total = data.count
  isLoading && ~(loading2.value = false)

  if (list.value.length >= total) {
    finished.value = true
  }
}
</script>

<template>
  <div class="page" v-if="!loading1">
    <van-nav-bar left-arrow title="用户列表" :border="false"></van-nav-bar>
    <van-list
      v-model:loading="loading2"
      :finished="finished"
      finished-text="没有更多了"
      @load="() => getList()"
    >
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="item__row"></div>

        <div class="item__row"></div>
      </div>
    </van-list>
  </div>

  <van-loading class="loading" v-else size="24px" vertical>
    加载中...
  </van-loading>
</template>

<style lang="scss" scoped></style>
